<template>
  <div>
      <h4>子组件: {{ count }}</h4>
       <h4>子组件2: {{ count2 }}</h4>
       
       <!-- 子向父传递 -->
       <h4>
           子组件数据 {{ num }}
       </h4>
       <button @click="send">子向父传递数据</button>

      <div>
          <button @click="getProps">点我获取props的值</button>
      </div>
      <!-- <h4>
          {{ abc.count }}
      </h4>
      <button @click="add">+1</button> -->
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
    props: ["count"],
    // setup(props)
    setup({ count }, { emit }) {
        // props 数据如果解构就不是响应式的了
        const getProps = () => {
            console.log(props)
        }

        const count2 = count
        const num = ref(888)

        const send = () => {
            emit("sendNum", num)
        }

        return {
            getProps,
            count2,
            num,
            send
        }
    }
}
</script>

<style>

</style>